import 'dart:math';

import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:travel/model/follow.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/ui/scroll_refresh_config.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';

class FollowPage extends StatefulWidget {
  const FollowPage({super.key});

  @override
  State<FollowPage> createState() => _FollowPageState();
}

class _FollowPageState extends State<FollowPage> {
  RefreshController refreshController = RefreshController();

  List<FollowModel> pageList = [];

  @override
  void initState() {
    initData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return scrollRefreshConfig(context);
  }

  @override
  void dispose() {
    refreshController.dispose();
    super.dispose();
  }

  ScrollRefreshConfig scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: refreshController,
      onRefresh: onRefresh,
      onLoading: onLoading,
      child: listViewBuilder(context),
    );
  }

  void initData() {
    pageList.add(FollowModel(
        avatar:
            'https://img2.baidu.com/it/u=3963450029,593837318&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '摄氏零度',
        travels: 1028,
        fans: '3.3万'));
    pageList.add(FollowModel(
        avatar:
            'https://img0.baidu.com/it/u=1320126246,1092851251&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: 'Seba',
        travels: 102,
        fans: '487'));
    pageList.add(FollowModel(
        avatar:
            'https://img1.baidu.com/it/u=304601638,3195254824&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '酸奶有点甜',
        travels: 1028,
        fans: '178'));
    pageList.add(FollowModel(
        avatar:
            'https://img2.baidu.com/it/u=1361586225,1693293111&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500',
        nickname: '李李酱',
        travels: 102,
        fans: '487'));
  }

  Future<void> onRefresh() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));
    refreshController.refreshCompleted(resetFooterState: true);
  }

  Future<void> onLoading() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));

    /// if failed, use loadFailed(), if no data return, use LoadNodata()
    if (pageList.length > 20) {
      return refreshController.loadNoData();
    }

    setState(() {
      /// 添加数据
      pageList.add(FollowModel(
          avatar:
              'https://img2.baidu.com/it/u=933399434,4184962118&fm=253&fmt=auto&app=138&f=JPEG?w=517&h=500',
          nickname: '鸽子',
          travels: Random.secure().nextInt(999999),
          fans: '${Random.secure().nextInt(999999)}'));
    });

    /// 完毕
    refreshController.loadComplete();
  }

  ListView listViewBuilder(BuildContext context) {
    return ListView.builder(
      itemBuilder: (_, index) {
        var row = pageList[index];
        return Container(
          margin: EdgeInsets.only(top: 10.h),
          padding: EdgeInsets.symmetric(horizontal: 15.w, vertical: 10.h),
          decoration: const BoxDecoration(color: Colors.white),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Align(
                alignment: Alignment.topLeft,
                child: CircleAvatar(
                  radius: 25.w,
                  backgroundImage: NetworkImage(row.avatar),
                ),
              ),
              Expanded(
                  child: Container(
                padding: EdgeInsets.only(left: 10.w),
                child: Column(
                  children: [
                    Expanded(
                        flex: 8,
                        child: Container(
                          alignment: Alignment.topLeft,
                          child: Text(
                            row.nickname,
                            style: StylesUtils.customTextStyle(
                                fontSize: 16.sp, color: ColorsUtils.color6666),
                          ),
                        )),
                    Expanded(
                        flex: 6,
                        child: Container(
                          alignment: Alignment.topLeft,
                          child: Text(
                            '${row.travels}篇游记  ${row.fans}关注粉丝',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999, fontSize: 12.sp),
                          ),
                        ))
                  ],
                ),
              )),
              Center(
                child: InkWell(
                  onTap: () {
                    setState(() {
                      row.isFollow = !row.isFollow;
                    });
                  },
                  child: Container(
                    constraints: BoxConstraints.expand(width: 70.w, height: 20.h),
                    alignment: Alignment.center,
                    decoration: activeBox(row),
                    child: Text(
                      '关注',
                      style: activeStyle(row),
                    ),
                  ),
                ),
              )
            ],
          ),
        );
      },
      itemCount: pageList.length,
      itemExtent: 76.h,
    );
  }

  BoxDecoration activeBox(FollowModel row) {
    if (row.isFollow) {
      return BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.w),
          border: Border.all(color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4)));
    }
    return BoxDecoration(
        gradient: LinearGradient(
            //linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%)
            colors: [ColorsUtils.rgba(52, 120, 246, 1), ColorsUtils.rgba(2, 167, 240, 1)],
            stops: const [0.0, 1.0],
            transform: const GradientRotation(90)),
        borderRadius: BorderRadius.circular(10.w));
  }

  TextStyle activeStyle(FollowModel row) {
    if (row.isFollow) {
      return StylesUtils.customTextStyle(color: ColorsUtils.color5555, fontSize: 12.sp);
    }
    return StylesUtils.customTextStyle(fontSize: 12.sp);
  }
}

class FansPage extends StatefulWidget {
  const FansPage({super.key});

  @override
  State<FansPage> createState() => _FansPageState();
}

class _FansPageState extends State<FansPage> {
  RefreshController refreshController = RefreshController();

  List<FansModel> pageList = [];

  @override
  void initState() {
    initData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return scrollRefreshConfig(context);
  }

  @override
  void dispose() {
    refreshController.dispose();
    super.dispose();
  }

  ScrollRefreshConfig scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: refreshController,
      onRefresh: onRefresh,
      onLoading: onLoading,
      child: listViewBuilder(context),
    );
  }

  void initData() {
    pageList.add(FansModel(
        avatar:
            'https://img2.baidu.com/it/u=3963450029,593837318&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '摄氏零度',
        travels: 1028,
        fans: '3.3万'));
    pageList.add(FansModel(
        avatar:
            'https://img0.baidu.com/it/u=1320126246,1092851251&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: 'Seba',
        travels: 102,
        fans: '487'));
    pageList.add(FansModel(
        avatar:
            'https://img1.baidu.com/it/u=304601638,3195254824&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '酸奶有点甜',
        travels: 1028,
        fans: '178'));
    pageList.add(FansModel(
        avatar:
            'https://img2.baidu.com/it/u=1361586225,1693293111&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500',
        nickname: '李李酱',
        travels: 102,
        fans: '487'));
  }

  Future<void> onRefresh() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));
    refreshController.refreshCompleted(resetFooterState: true);
  }

  Future<void> onLoading() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));

    /// if failed, use loadFailed(), if no data return, use LoadNodata()
    if (pageList.length > 100) {
      return refreshController.loadNoData();
    }

    setState(() {
      /// 添加数据
      pageList.add(FansModel(
          avatar:
              'https://img2.baidu.com/it/u=933399434,4184962118&fm=253&fmt=auto&app=138&f=JPEG?w=517&h=500',
          nickname: '鸽子',
          travels: Random.secure().nextInt(999999),
          fans: '${Random.secure().nextInt(999999)}'));
    });

    /// 完毕
    refreshController.loadComplete();
  }

  ListView listViewBuilder(BuildContext context) {
    return ListView.builder(
      itemBuilder: (_, index) {
        var row = pageList[index];
        return Container(
          margin: EdgeInsets.only(top: 10.h),
          padding: EdgeInsets.symmetric(horizontal: 15.w, vertical: 10.h),
          decoration: const BoxDecoration(color: Colors.white),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Align(
                alignment: Alignment.topLeft,
                child: CircleAvatar(
                  radius: 25.w,
                  backgroundImage: NetworkImage(row.avatar),
                ),
              ),
              Expanded(
                  child: Container(
                padding: EdgeInsets.only(left: 10.w),
                child: Column(
                  children: [
                    Expanded(
                        flex: 8,
                        child: Container(
                          alignment: Alignment.topLeft,
                          child: Text(
                            row.nickname,
                            style: StylesUtils.customTextStyle(
                                fontSize: 16.sp, color: ColorsUtils.color6666),
                          ),
                        )),
                    Expanded(
                        flex: 6,
                        child: Container(
                          alignment: Alignment.topLeft,
                          child: Text(
                            '${row.travels}篇游记  ${row.fans}关注粉丝',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999, fontSize: 12.sp),
                          ),
                        ))
                  ],
                ),
              )),
              Center(
                child: InkWell(
                  onTap: () {
                    setState(() {
                      row.isFollow = !row.isFollow;
                    });
                  },
                  child: Container(
                    constraints: BoxConstraints.expand(width: 70.w, height: 20.h),
                    alignment: Alignment.center,
                    decoration: activeBox(row),
                    child: Text(
                      '关注',
                      style: activeStyle(row),
                    ),
                  ),
                ),
              )
            ],
          ),
        );
      },
      itemCount: pageList.length,
      itemExtent: 76.h,
    );
  }

  BoxDecoration activeBox(FansModel row) {
    if (row.isFollow) {
      return BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.w),
          border: Border.all(color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4)));
    }
    return BoxDecoration(
        gradient: LinearGradient(
            //linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%)
            colors: [ColorsUtils.rgba(52, 120, 246, 1), ColorsUtils.rgba(2, 167, 240, 1)],
            stops: const [0.0, 1.0],
            transform: const GradientRotation(90)),
        borderRadius: BorderRadius.circular(10.w));
  }

  TextStyle activeStyle(FansModel row) {
    if (row.isFollow) {
      return StylesUtils.customTextStyle(color: ColorsUtils.color5555, fontSize: 12.sp);
    }
    return StylesUtils.customTextStyle(fontSize: 12.sp);
  }
}
